<app-logic [typename]="type_name" [multiLogics]="multiLogics" [p_id]="p_id" [nextNodes]="nextNodes" [n_name]="n_name" [inLogic]="inLogics" [gids]="gids" [node_id]="node_id" [class.active]="logicActive" (saveAllMultiLogic)="saveAllMultiLogic($event)"  (saveAllLogic)="saveAllLogic($event)" (toggleEvent)="logicToggle()" class="logic"></app-logic>
<div id="center-box" #centerBox>
    <div [class.pointEvents]="!pointerEvents"
         [style.transform] = "'scale('+scale+')'"
         [style.transform-origin]="'left top'"
         [style.width.px] = "rect.width"
         [style.height.px] = "rect.height"
         style="transition: transform 0.5s;background: #fff;"
         (dragover)="dragover($event)"
         (drop)="dropend($event)"
         (mousemove)="onMouseMove($event)"
         (mouseup)="onMouseUp($event)"
         (mouseleave)="onMouseLeave($event)"
    >
        <ng-container *ngFor="let data of componentList; let i = index;">
            <div class="c-txt" [class.editing]="i == currentId"

                 *ngIf="data.name == 'txt'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-txt
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-txt>
            </div>
            <div class="c-img" [class.editing]="i == currentId"
                 *ngIf="data.name == 'img'"

                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-img
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [src]="data.data.src"
                ></app-c-img>
            </div>
            <div class="c-web" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_web'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-web
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-web>
            </div>
            <div class="c-pdf" [class.editing]="i == currentId"
                 *ngIf="data.name == 'pdf'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"

            >
                <app-c-pdf
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [src]="data.data.src"
                ></app-c-pdf>
            </div>
            <div class="c-video" [class.editing]="i == currentId"
                 *ngIf="data.name == 'video'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"

            >
                <app-c-video
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [src]="data.data.src"
                ></app-c-video>
            </div>
            <div class="c-audio" [class.editing]="i == currentId"
                 *ngIf="data.name == 'audio'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"

            >
                <app-c-audio
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [src]="data.data.src"
                ></app-c-audio>
            </div>
            <div class="c-button" [class.editing]="i == currentId"
                 *ngIf="data.name == 'button'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-button
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-button>
            </div>
            <div class="c-select" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_select'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-select
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-select>
            </div>

            <div class="c-tieba" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_tieba'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
            >
                <app-c-tieba
                    [data]="data.data"
                    [appAutoScale]="rect"
                ></app-c-tieba>
            </div>
            <div class="c-weibo" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_weibo'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
            >
                <app-c-weibo
                    [data]="data.data"
                    [appAutoScale]="rect"
                ></app-c-weibo>
            </div>
            <div class="c-qq" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_QQ'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
            >
                <app-c-qq
                    [data]="data.data"
                    [appAutoScale]="rect"
                ></app-c-qq>
            </div>
            <div class="c-brain" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_brain'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-brain
                    [data]="data.data"
                ></app-c-brain>
            </div>
            <div class="c-brain" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_infoext'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-braininfo
                    [p_id] = "p_id"
                    [data]="data"
                    [type_name]="type_name"
                ></app-c-braininfo>
            </div>
            <div class="c-turns-speak" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_turns_speak'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-sixhats
                    [data]="data.data"
                ></app-c-sixhats>
            </div>
            <div class="c-braingroup" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_tnfbgroup'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-braingroup
                    [data]="data.data"
                ></app-c-braingroup>
            </div>
            <div class="c-bullet" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_bullet'"
                 style="z-index: 9999;"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-bullet
                    [data]="data.data"
                ></app-c-bullet>
            </div>
            <div class="c-subjective" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_subjective'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-subjective
                    [data]="data.data"
                ></app-c-subjective>
            </div>
            <div class="c-causal" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_causal'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-causal
                    [data]="data.data"
                ></app-c-causal>
            </div>
            <div class="c-guess" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_guess'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-guess
                    [data]="data.data"
                ></app-c-guess>
            </div>
            <div class="c-seek" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_seek'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-seek
                    [data]="data.data"
                ></app-c-seek>
            </div>
            <div class="c-mindmap" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_mindmap'"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-mindmap
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-mindmap>
            </div>

            <div class="c-vote" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_vote'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-vote
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-vote>
            </div>
            <div class="c-judgement" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_judgement'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-judgement
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-judgement>
            </div>
            <div class="c-sgaudio" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_audio'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-sgaudio
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-sgaudio>
            </div>
            <div class="c-checkbox" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_checkbox'"
                 [style.left.px]="data.style.x"
                 [style.top.px]="data.style.y"
                 [style.width.px]="data.style.width"
                 [style.height.px]="data.style.height"
                 [style.color]="data.style.color"
                 [style.background]="data.style.background"
                 [style.justifyContent]="data.style.justifyContent"
                 [style.alignItems]="data.style.alignItems"
                 [style.fontFamily]="data.style.fontFamily"
                 [style.fontSize.px]="data.style.fontSize"
                 [style.textDecoration]="data.style.textDecoration"
                 [style.fontStyle]="data.style.fontStyle"
                 [style.fontWeight]="data.style.fontWeight"
                 appMoveElement [id]="i"
                 (onMouseDown)="onElementDown($event)"
                 (dblclick)="onDoubleClick(i)"
                 ngResizable (resizeStart)="onResizeStart($event,i)" (resizing)="onResizing($event,i)" (resizeEnd)="onResizeEnd($event,i)"
            >
                <app-c-checkbox
                    [canEdit]="data.style.canEdit"
                    (onBlur)="onBlur(i)"
                    [data]="data.data"
                    (dataChange)="onDataChange($event,i)"
                ></app-c-checkbox>
            </div>
            <div class="c-special-battle" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_special_battle'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-special-battle
                    [data]="data.data"
                ></app-c-special-battle>
            </div>
            <div class="c-originality-case" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_originality_case'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-originality-case
                    [data]="data.data"
                ></app-c-originality-case>
            </div>
            <div class="c-coffee" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_coffee'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-coffee
                    [data]="data.data"
                ></app-c-coffee>
            </div>
            <div class="c-six-hat" [class.editing]="i == currentId"
                 *ngIf="data.name == 'SG_sixHat'"
                 (mousedown)="onElementDown({'event': $event, 'id': i})"
                 style="width: 100%"
            >
                <app-c-six-hat
                    [data]="data.data"
                ></app-c-six-hat>
            </div>
        </ng-container>
    </div>
</div>


